<script setup>
import HeatMapData2D from "@/assets/data/Data.json"
import * as echarts from "echarts"
import {onMounted, ref, watch} from "vue";

const props = defineProps({
  heatMap: {
    type: Array,
    default: () => []
  }
})

//x,y轴坐标范围
let xData = [];
let yData = [];
let data = [];
for (let i = 0; i <= 200; i++) {
  xData.push(i);
}
for (let j = 0; j < 100; j++) {
  yData.push(j);
}


const heatResult = ref()
onMounted(() => {
  let myChart = echarts.init(heatResult.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  let option = {
    tooltip: {
      trigger: "item", //item默认为图形触发 还有axis坐标轴触发
      //设置文字样式
      textStyle: {
        color: "black"
      },
      formatter: function (params) {
        return params.seriesName + '<br>•(x,y): (' + params.data[0] + ',' + params.data[1] + ')<br>•温度(K): ' + params.data[2].toFixed(2);
        ;
      }
    },
    grid: {
      //bottom:'0%'
    },
    title: {
      text: '隧道热源反演结果',
      left: 'center',
      top: '1.5%'
    },
    xAxis: {
      name: 'X/m',
      type: 'category',
      data: xData
    },
    yAxis: {
      name: 'Y/m',
      type: 'category',
      data: yData
    },
    visualMap: {
      orient: 'horizontal',
      min: 271.15,
      max: 313.15,
      calculable: true,
      realtime: false,//false
      inRange: {
        color: [
          '#313695',
          '#4575b4',
          '#74add1',
          '#abd9e9',
          '#e0f3f8',
          '#ffffbf',
          '#fee090',
          '#fdae61',
          '#f46d43',
          '#d73027',
          '#a50026'
        ]
      }
    },
    series: [
      {
        name: '热源点',
        type: 'heatmap',
        data: data,
        emphasis: {
          itemStyle: {
            borderColor: '#333',
            borderWidth: 1,
            //borderHeight: 2,
          }
        },
        //progressive: 1000,
        animation: false
      }
    ]
  };
  myChart.setOption(option);
  watch(props, () => {
    //坐标数据
    for (let k = 0; k < props.heatMap.length; k++) {
      data.push([props.heatMap[k].x, props.heatMap[k].y, props.heatMap[k].temperature])
    }
    option.series.data=data
    myChart.setOption(option);
    // for (let k = 0; k < HeatMapData2D.length; k++){
    // data.push(HeatMapData2D[k]);
    // }
  })


  window.addEventListener('resize', myChart.resize);
})


</script>

<template>
  <div class="heat-left1" id="heat-left1" ref="heatResult"></div>
</template>

<style scoped>

</style>
<!--2024/2/7 21:13-->